<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<script type="text/javascript">
    $(document).ready(
        function () {
            //TODO bug active有问题 js函数没问题 有其他干扰因素会再选中 网站首页
            //修改导航菜单选中状态
            $("#nav li").click(function () {
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
            });
            //显示购物车中商品数量
            if (cart.getGoodsList() == false)
                $("#cartBadge").text(0);
            else
                $("#cartBadge").text(cart.getGoodsList().length);

            //获取所有商品分类
            $.post("${pageContext.request.contextPath}/category/getAll", null, function (result) {
                var cates = result;
                if (cates && cates.length > 0) {
                    for (var i = 0; i < cates.length; i++) {
                        //上方导航下拉菜单-商品分类
                        var s = "<li><a href='/product/getProductsByCid?cid=" + cates[i].cid + "'>" + cates[i].name + "</a></li>";
                        $("#dropdown_cate").append(s);
                    }
                }
                else {
                    $("#dropdown_cate").html("暂无相关信息");
                }
            }, "json");
        }
    );

    //显示购物车模态框
    function showCart() {
        var goodsList = cart.getGoodsList();
        //取出购物车商品
        var s = "<h3>目前购物车为空，快去购物吧</h3>";
        if (goodsList != null && goodsList.length > 0) {
            $("#ok").removeAttr("disabled");
            s = "<div class='table-responsive'><table class='table table-hover table-striped table-condensed '><thead><tr>"
                + "<th >#</th><th >商品图片</th><th >商品名称</th><th >商品单价</th><th >数量</th><th >小计</th><th >操作</th></tr></thead><tbody>";
            for (var i = 0; i < goodsList.length; i++) {
                var goods = goodsList[i];
                s += "<input type='hidden' name='goodsId' value='" + goods.id + "'/>";
                s += "<input type='hidden' name='size' value='" + goods.size + "'/>";
                s += "<input type='hidden' name='color' value='" + goods.color + "'/>";
                s += "<input type='hidden' name='goodsName' value='" + goods.name + "'/>";
                s += "<input type='hidden' name='pic' value='" + goods.pic + "'/>";
                s += "<input type='hidden' name='goodsPrice' value='" + goods.price + "'/>";
                s += "<input type='hidden' name='goodsDiscount' value='" + goods.discount + "'/>";
                s += "<input type='hidden' name='goodsPostalfee' value='" + goods.postalfee + "'/>";
                s += "<tr><td>" + (i + 1) + "</td>";
                s += "<td><img src='" + goods.pic
                    + "' width='50' height='50'></td>";
                s += "<td><a href='" +
                    "/product/getProductDetail?pid=" + goods.id
                    + "'>" + goods.name
                    + "</a><br>" + goods.size + "&nbsp;&nbsp;"
                    + goods.color + "</td>";
                s += "<td>原价<span class='glyphicon glyphicon-yen' ></span>"
                    + goods.price
                    + "<br>现售<span class='glyphicon glyphicon-yen' ></span>"
                    + goods.discount + "</td>";
                s += "<td><div class='input-group input-group-sm col-xs-5'><input class='form-control input-small' onblur='changeCart("
                    + i
                    + ")' id='cartnum' name='num' type='number' value='"
                    + goods.num + "'/></div></td>";
                s += "<td><span class='glyphicon glyphicon-yen' ></span>"
                    + goods.num * goods.discount + "</td>";
                s += "<td><a href='#' onclick='delCart(" + i
                    + ")'>删除</a></td></tr>";
            }
            s += "</tbody></table></div>";
            s += "<a href='#' onclick='clearCart()'>清空购物车</a>";
            s += "<div class='text-right'>已选"
                + orderdetail.totalNumber
                + "件商品&nbsp;&nbsp;合计（不含运费）<span class='glyphicon glyphicon-yen' ></span>"
                + orderdetail.totalAmount + "</div>";
        } else {
            $("#ok").attr("disabled", "disabled");
        }
        $("#cartBody").html(s);
        $("#cartModal").modal();
    }

    function login() {
        var userName = $("#userName").val();
        var userPass = $("#userPass").val();
        var isRemember;
        if ($('#isRemember').is(':checked')) {
            isRemember = $("#isRemember").val();
        }
        $.post("${pageContext.request.contextPath}/user/login", {
                'user.username': userName,
                'user.password': userPass,
                'isRemember': isRemember
            },
            function (result) {
                $('#loginFormModal').modal('hide');
                if (result == "success") {
                    $("#info").html("<li id='li1'><span>用户您好，欢迎来到良品专卖店！</span>" +
                        "<li><a href='#' onclick='showCart()'>购物车 <span class='badge' id='cartBadge'></span></a></li>" +
                        "<li><a href='${pageContext.request.contextPath}/order/getMyOrders'>我的订单</a></li>" +
                        "<li><a href='${pageContext.request.contextPath}/user/center'>个人中心</a></li>" +
                        "<li><a href='${pageContext.request.contextPath}/logout'>退出登录</a></li>");
                    //显示购物车中商品数量
                    $("#cartBadge").html(cart.getGoodsList().length);
                    location.reload();
                }
                else {
                    //alert("false");
                    $("#msgTitle").html("登录失败");
                    $("#msgBody").html("用户名或密码错误");
                    $("#msgModal").modal();
                }
            }, "json");
    }

    function logout() {
        $.post("${pageContext.request.contextPath}/user/logout", null, function () {
            location.reload();
        }, "json");
    }

    function reg() {
        $.post("${pageContext.request.contextPath}/user/register", $('#regForm').serialize(), function (result) {
            $('#regFormModal').modal('hide');
            if (result == "success") {
                $("#msgTitle").html("注册成功");
                $("#msgBody").html("恭喜您，注册成功");
                $("#msgModal").modal();
            }
            else {
                $("#msgTitle").html("注册失败");
                $("#msgBody").html("对不起，注册失败");
                $("#msgModal").modal();
            }
        }, "json");
    }

    function checkLogin(result) {
        if (result.login) {
            //$("#msgTitle").html(result.login);
            //$("#msgBody").html(result.login);
            //$("#msgModal").modal();
            $("#loginFormModal").modal();
            return false;
        }
        return true;
    }

    function checkName() {
        $.post("${pageContext.request.contextPath}/user/checkName", {username: $("#regForm #userName").val()}, function (result) {
            if (result == "success") {
                $("#checkNameResult").html("<span style='color: green'>该用户名可用</span>");
            }
            else {
                $("#checkNameResult").html("<span style='color: red'>对不起，该用户名已被占用，请更换</span>");
            }
        }, "json");
    }

    function delCart(index) {
        cart.deleteGoods(index);
        showCart();
        $("#cartBadge").html(parseInt($("#cartBadge").html()) - 1);
    }

    function clearCart() {
        $("#cartBadge").html("0");
        $("#ok").attr("disabled", "disabled");
        $("#cartBody").html("<h3>目前购物车为空，快去购物吧</h3>");
        cart.clearGoods();
    }

    function changeCart(index) {
        var newnum = $("#cartnum").val();
        cart.updateGoodsNum(index, newnum);
        showCart();
    }

    /* 	function makesure(msg){
     $("#confirmTitle").html("请确认");
     $("#confirmBody").html(msg);
     $("#confirmModal").modal();
     return flag;
     } */
    function submitLoginForm() {
        $('#loginForm').submit();
        $('#loginFormModal').modal('hide');
    }
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-right">
            <ol class="breadcrumb" id="info">
                <shiro:guest>
                    <li id="li1"><span>游客您好，欢迎来到良品专卖店！</span>
                        <a href="#loginFormModal" data-toggle="modal">[登录]</a>&nbsp;
                        <a href="#regFormModal" data-toggle="modal">[新用户注册]</a>
                    </li>
                    <li><a href="#" onclick="showCart()">购物车<span class="badge" id="cartBadge"></span></a></li>
                </shiro:guest>
                <shiro:user>
                    <li id="li1"><span><shiro:principal/>您好，欢迎来到良品专卖店！</span></li>
                    <li><a href="#" onclick="showCart()">购物车<span class="badge" id="cartBadge"></span></a></li>
                    <li><a href="${pageContext.request.contextPath}/order/getMyOrders">我的订单</a></li>
                    <li><a href="${pageContext.request.contextPath}/user/center">个人中心</a></li>
                <shiro:hasRole name="admin">
                    <li><a href="${pageContext.request.contextPath}/admin/index">后台管理</a></li>
                </shiro:hasRole>
                    <li><a href="${pageContext.request.contextPath}/logout">退出登录</a></li>
                </shiro:user>
            </ol>

        </div>

        <div class="col-md-12">
            <nav class="navbar navbar-default navbar-static-top" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="${pageContext.request.contextPath}/user/index">良品服装专卖店</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav" id="nav">
                        <li class="active">
                            <a href="${pageContext.request.contextPath}/user/index">网站首页</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/product/getNewProduct">新到商品</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/product/getHotSaleProduct">热销商品</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown">商品分类
                                <strong class="caret"></strong>
                            </a>
                            <ul class="dropdown-menu" id="dropdown_cate">
                            </ul>
                        </li>
                    </ul>

                    <form class="navbar-form navbar-left form-inline " role="search" method="post"
                          action="${pageContext.request.contextPath}/product/search">
                        <div class="form-group">
                            <input class="form-control " name="keyword" value="${param.keyword}"/>
                        </div>

                        <button class="btn btn-default" type="submit">店内搜索</button>
                    </form>

                    <ul class="nav navbar-nav navbar-right">

                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown">排序<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <c:if test="${param.keyword!=null}">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?keyword=${param.keyword}&sort=1">按价格从低到高</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?keyword=${param.keyword}&sort=2">按价格从高到低</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?keyword=${param.keyword}&sort=3">按销量从高到低</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?keyword=${param.keyword}&sort=4">按销量从低到高</a>
                                    </li>
                                </c:if>
                                <c:if test="${param.keyword==null}">

                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?cid=${param.cateId==null?null:param.cid}&sort=1">按价格从低到高</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?cid=${param.cateId==null?null:param.cid}&sort=2">按价格从高到低</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?cid=${param.cateId==null?null:param.cid}&sort=3">按销量从高到低</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/product/search?cid=${param.cateId==null?null:param.cid}&sort=4">按销量从低到高</a>
                                    </li>
                                </c:if>
                            </ul>
                        </li>
                        <li class="col-md-2"></li>
                    </ul>
                </div>

            </nav>
        </div>
    </div>
    <%@include file="loginFormModal.jsp" %>

    <%@include file="msgModal.jsp" %>

    <%@include file="regFormModal.jsp" %>

    <%@include file="cartModal.jsp" %>

    <%@include file="confirmModal.jsp" %>
</div>